<template>
  <indexMerge>
    <div class="container">
      <!-- 面包屑导航 -->
      <XtxBread>
        <XtxBreadItem path="/">首页</XtxBreadItem>
        <XtxBreadItem
          :path="`/category/${categoryArr.needOneArr.id}`"
          v-if="categoryArr.needOneArr"
        >
          {{ categoryArr.needOneArr.name }}
        </XtxBreadItem>
        <transition name="fade-right" mode="out-in">
          <XtxBreadItem
            :key="categoryArr.needTwoArr.id"
            v-if="categoryArr.needTwoArr"
          >
            {{ categoryArr.needTwoArr.name }}
          </XtxBreadItem>
        </transition>
      </XtxBread>
      <!-- 筛选条件 -->
      <SubFilter />
      <div class="goods-list">
        <!-- 商品排序 -->
        <SubSort @handleComeSubSort="handleComeSubSort" />
        <!-- 商品详情 -->
        <GoodsList :screenData="screenData" />
        <!-- 数据加载页面展示 -->
        <XtxInfiniteLoading
          @judgeLoadingOrEnd="judgeLoadingOrEnd"
          :loadingState="loadingState"
          :endState="endState"
        />
      </div>
    </div>
  </indexMerge>
</template>

<script>
import indexMerge from "../../components/currency/indexMerge";
import SubFilter from "../../components/category/SubFilter";
import GoodsList from "../../components/category/GoodsList";
import SubSort from "../../components/category/SubSort";
import { useStore } from "vuex";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { computed, ref, watch } from "vue";
import { getSortData } from "../../api/category";

export default {
  name: "twoCategory",
  setup() {
    const store = useStore();
    const route = useRoute();
    // 存放筛选数据
    let {
      screenData,
      categoryParams,
      loadingState,
      endState,
      judgeLoadingOrEnd,
    } = fnScreenData();
    // console.log(loadOrnone.value);

    // 获取面包屑数据
    function fnCrumbsData() {
      return computed(() => {
        // 获取所点击的一级导航数据
        let needOneArr = null;
        // 获取所点击的二级导航数据
        let needTwoArr = null;

        store.state.category.list.forEach((i) => {
          i.children?.forEach((y) => {
            if (y.id === route.params.id) {
              needOneArr = i;
              needTwoArr = y;
            }
          });
          // console.log(needOneArr, needTwoArr);
        });

        return {
          needOneArr,
          needTwoArr,
        };
      });
    }

    // 获取来自子组件的筛选条件
    const handleComeSubSort = (obj) => {
      categoryParams.value = {
        ...categoryParams.value,
        ...obj,
        page: 1,
      };
    };

    // 当路由发生改变时，重新获取筛选数据
    onBeforeRouteUpdate((to) => {
      categoryParams.value = {
        ...categoryParams.value,
        categoryId: to.params.id,
        page: 1,
      };
    });

    return {
      categoryArr: fnCrumbsData(),
      screenData,
      handleComeSubSort,
      judgeLoadingOrEnd,
      loadingState,
      endState,
    };
  },
  components: {
    indexMerge,
    SubFilter,
    SubSort,
    GoodsList,
  },
};

// 根据筛选条件获取数据
function fnScreenData() {
  const route = useRoute();
  // console.log(route.params.id);
  // 存放筛选数据
  let screenData = ref([]);
  // 存放 加载状态
  let loadingState = ref(false);
  // 存放 结束状态
  let endState = ref(false);

  // 请求参数
  let categoryParams = ref({
    categoryId: route.params.id,
    page: 1,
    pageSize: 5,
  });

  // 获取数据
  const getGoods = () => {
    // 发起请求前显示 loading组件 || none组件消失
    loadingState.value = true;
    endState.value = false;

    getSortData(categoryParams.value).then((res) => {
      if (categoryParams.value.page === 1) {
        screenData.value = res.result.items;
      } else if (categoryParams.value.page <= res.result.pages) {
        // console.log(categoryParams.value.page, res.result.pages);
        screenData.value.push(...res.result.items);
        loadingState.value = false;
      }

      if (categoryParams.value.page === res.result.pages) {
        loadingState.value = false;
        endState.value = true;
      }
    });
  };

  // 第一次进入时请求数据
  // getGoods();

  // 计算得到是否还有数据，如果还有数据就显示 loading 否 结束
  const judgeLoadingOrEnd = () => {
    if (screenData.value.length && !endState.value) {
      // console.log(endState.value);
      categoryParams.value = {
        ...categoryParams.value,
        page: categoryParams.value.page + 1,
      };
    }
  };

  // 监听 categoryParams 是否发生了变化，然后发起请求，重新获取新数据
  watch(
    () => categoryParams.value,
    () => {
      getGoods();
    },
    { immediate: true }
  );

  return {
    screenData,
    categoryParams,
    judgeLoadingOrEnd,
    loadingState,
    endState,
  };
}
</script>

<style scoped lang="less">
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
